<template>
	<view class="content">
		<view style="">
			<u-notice-bar mode="closable" icon="volume" :text="text1"></u-notice-bar>
		</view>

		<view style="width: 100%;position: relative;">
			<u-search bg-color="#ffffff" border-color="#f56c6c" :clearabled="false" :showAction="false"
				v-model="searchkeyword"></u-search>
			<view style="width: 120rpx;position: absolute;top: 2px;right: 6px">
				<u-button color="linear-gradient(to right, rgb(255, 159, 25), rgb(255, 0, 0))" size="small"
					shape="circle">搜索</u-button>
			</view>
		</view>

		<view>
			<u-scroll-list>
				<view class="scroll-list">
					<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
						<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
							:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
							<image class="scroll-list__line__item__image" :src="menuBaseUrl + item1.icon" mode="">
							</image>
							<text class="scroll-list__line__item__text">{{ item1.name }}</text>
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>

		<!-- <view>
					<u-grid :border="false" col="2">
						<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex"
							customStyle="padding-top: 10px; padding-bottom: 10px">
							dd
						</u-grid-item>
					</u-grid>
				</view> -->
		<view style="display: flex;">
			<view class="leftbody" style="width: 50%;display: flex;flex-direction: column;">
				<template v-for="(listItem,listIndex) in list">
					<view v-if="listIndex%2==0" style="height: 200px;border: 1px solid ;">
						{{listItem}}
					</view>
				</template>
			</view>

			<view class="rightbody" style="width: 50%;display: flex;flex-direction: column;">
				<template v-for="(listItem,listIndex) in list">
					<view v-if="listIndex%2==1" style="height: 200px;border: 1px solid ;">
						{{listItem}}
					</view>
				</template>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				searchkeyword: '遥看瀑布挂前川',
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				menuArr: [
					[{
							name: '天猫新品',
							icon: '11.png'
						},
						{
							name: '今日爆款',
							icon: '9.png'
						}, {
							name: '天猫国际',
							icon: '17.png'
						}, {
							name: '饿了么',
							icon: '6.png'
						}, {
							name: '天猫超市',
							icon: '11.png'
						}, {
							name: '分类',
							icon: '2.png'
						}, {
							name: '天猫美食',
							icon: '3.png'
						}, {
							name: '阿里健康',
							icon: '12.png'
						}, {
							name: '口碑生活',
							icon: '7.png'
						}
					],
					[{
							name: '充值中心',
							icon: '8.png'
						},
						{
							name: '机票酒店',
							icon: '10.png'
						}, {
							name: '金币庄园',
							icon: '18.png'
						}, {
							name: '阿里拍卖',
							icon: '15.png'
						}, {
							name: '淘宝吃货',
							icon: '16.png'
						}, {
							name: '闲鱼',
							icon: '4.png'
						}, {
							name: '会员中心',
							icon: '6.png'
						}, {
							name: '造点新货',
							icon: '13.png'
						}, {
							name: '土货鲜食',
							icon: '14.png'
						}
					]
				],
				list: [{
						name: 'photo',
						title: '图片'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
					{
						name: 'hourglass',
						title: '沙漏'
					},
					{
						name: 'home',
						title: '首页'
					},
					{
						name: 'volume',
						title: '音量'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.scroll-list {
		@include flex(column);

		&__content {
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;
				text-align: center;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}
</style>